google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function(){
  var data = new google.visualization.DataTable();
       data.addColumn('string', '日');
       data.addColumn('number', 'DL数');
       data.addColumn('number', 'Googleセルラン');
       data.addColumn('number', 'iOSセルラン');
       data.addColumn({type:'string', role:'annotation'});
       data.addColumn({type:'string', role:'annotationText'});
       data.addRows([
        ['2022-06-07',null,434,129,null,null],
['2022-06-08',5062264,434,123,null,null],
['2022-06-09',5062442,435,110,null,null],
['2022-06-10',5062442,398,105,null,null],
['2022-06-11',5062442,398,126,null,null],
['2022-06-12',5062848,378,132,null,null],
['2022-06-13',5062848,352,124,null,null],
['2022-06-14',5062848,347,132,null,null],
['2022-06-15',5063545,335,120,null,null],
['2022-06-16',5063545,338,145,null,null],
['2022-06-17',5063545,338,149,null,null],
['2022-06-18',5063545,378,112,null,null],
['2022-06-19',5064281,374,123,null,null],
['2022-06-20',5064281,366,124,null,null],
['2022-06-21',5064281,366,109,null,null],
['2022-06-22',5064281,356,109,null,null],
['2022-06-23',5064623,345,120,null,null],
['2022-06-24',5064943,329,125,null,null],
['2022-06-25',5065135,330,152,null,null],
['2022-06-26',5065135,330,150,null,null],
['2022-06-27',5065135,347,137,null,null],
['2022-06-28',5065135,347,128,null,null],
['2022-06-29',5065383,356,133,null,null],
['2022-06-30',5066102,356,144,null,null],
['2022-07-01',5066355,356,190,null,null],
['2022-07-02',5066355,371,null,null,null],
['2022-07-03',5066561,422,194,null,null],
['2022-07-04',5066820,422,164,null,null],
['2022-07-05',5066959,437,139,null,null],
['2022-07-06',5067057,444,137,null,null],
['2022-07-07',5067249,448,123,null,null],
['2022-07-08',5067367,443,103,null,null],
['2022-07-09',5067485,427,112,null,null],
['2022-07-10',5067543,375,117,null,null],
['2022-07-11',5067692,363,116,null,null],
['2022-07-12',5067869,349,130,null,null],
['2022-07-13',5067869,346,119,null,null],
['2022-07-14',5068095,340,141,null,null],
['2022-07-15',5068095,343,147,null,null],
['2022-07-16',5068208,359,157,null,null],
['2022-07-17',5068346,367,158,null,null],
['2022-07-18',5068634,380,141,null,null],
['2022-07-19',5068852,391,133,null,null],
['2022-07-20',5069006,394,113,null,null],
['2022-07-21',5069006,392,105,null,null],
['2022-07-22',5069359,370,139,null,null],
['2022-07-23',5069477,369,123,null,null],
['2022-07-24',5069656,369,120,null,null],
['2022-07-25',5070031,361,119,null,null],
['2022-07-26',5070031,353,122,null,null],
['2022-07-27',5070176,341,118,null,null],
['2022-07-28',5070571,344,128,null,null],
['2022-07-29',5070715,348,159,null,null],
['2022-07-30',5070916,363,162,null,null],
['2022-07-31',5071127,375,165,null,null],
['2022-08-01',5071326,382,168,null,null],
['2022-08-02',5071513,382,null,null,null],
['2022-08-03',5071685,429,185,null,null],
['2022-08-04',5071685,445,169,null,null],
['2022-08-05',5071824,449,140,null,null],
['2022-08-06',5071998,453,108,null,null]
        ]);
  var options = {
    chartArea: {'width':'85%', 'height':'65%', 'left':60 },
    'pointSize': 3,
    legend: {position: 'top' },
    vAxes:[
      {direction:1},
      {direction:-1,viewWindow:{min:0,max:400}}
    ],
    series: {
      0:{
        type: 'bars',
        color: 'skyblue',
        targetAxisIndex: 0,
      },
      1:{
        type: 'line',
        color: 'seagreen',                
        targetAxisIndex: 1,
      },
      2:{
        type: 'line',
        color: 'red',                
        targetAxisIndex: 1,
      },
    },
    tooltip: { trigger: 'both' },
    focusTarget: 'category',
    colors:['#2980b9','#e74c3c']
  };
  var chart = new google.visualization.ComboChart(document.getElementById('graphField'));
  chart.draw(data, options);
  
  google.visualization.events.addListener(chart, 'click', function() {
    if(chart.getSelection()[0]){
      chart.setSelection(null)
    }
  });


});